     <template>
    <Page class="basic company">
        <template #header>
            <RoomInput class="mr-2" multiple :rooms.sync="params.rooms"/>
            <!-- <el-input v-model="params.roomCode" placeholder="请输入房间号" /> -->
            <el-input v-model="params.phone" placeholder="请输入手机号"/>
            <EdSelect  :selectParams="identityParams" v-model="params.identity"></EdSelect>
            <EdSelect  :selectParams="residentStatusParams" v-model="params.status"></EdSelect>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()" ><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="人员门禁同步列表">
            <template #actions>
                <el-button class="ed-button ed_black-bottom ed-button36" icon="el-icon-refresh" @click="clickSynchronizate()" v-has="'access:auth'" >一键同步</el-button>
                <el-button class="ed-button ed_black-bottom ed-button36" :disabled="multipleSelection.length==0" @click="synchronizate()" v-has="'access:authAsync'" icon="el-icon-refresh">批量同步</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="params" @selectionData="selectionData">
                <el-table-column type="selection" width="60" label="序号"  align="center" :selectable="selectable"></el-table-column>
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="address" label="房屋编号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="userName" label="客户姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="ownerPhone" label="手机号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="identity" label="身份">
                    <template slot-scope="scope">
                        <span  v-if="scope.row.identity == 3">物业人员</span>
                        <span v-else>住户</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="authStatus" label="同步状态" :formatter="setDicTypeStatus">
                    <template slot-scope="scope">
                        <div><span :class="['spanLabel spanLabelWidth marginRight8', 'spanLabelColor'+scope.row.authStatus]"></span>{{returnName(scope.row['authStatus'], selectStatus.options) || scope.row['authStatus'] || '-'}}</div>
                        <!-- <el-button class="ed-table-bottom ed_4_border" v-if="scope.row.authStatus == 0">待同步</el-button>
                        <el-button class="ed-table-bottom ed_7_border" v-if="scope.row.authStatus == 1">同步成功</el-button>
                        <el-button class="ed-table-bottom ed_3_border" v-if="scope.row.authStatus == 2">同步失败</el-button> -->
                    </template>
                </el-table-column> 
                <el-table-column :show-overflow-tooltip="true" label="操作" width="180px">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" @click="check(scope.row)" v-has="'access:check'" >查看</el-button>
                        <el-button class="ed-table-bottom ed_blue_border" @click="addAuth(scope.row)" v-has="'access:addAuth'" :disabled="scope.row.authStatus==1">同步</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
            <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
            <el-dialog
            :close-on-click-modal="false"
            custom-class="wisdomDialog"
            title="用户门禁权限查看"
            :visible.sync="synchronizateFailVisible"
            class="showTable"
            width="650px">
            <div class="synchronizate">
                <div class="doorTable">
                    <el-table
                    stripe
                    :data="checkDoorSelection"
                    @selection-change="checkDoorChange"
                    :header-cell-style="{background: '#F4F4F4'}"
                    :header-cell-class-name="cellClass">
                    <el-table-column type="selection" width="20" align="center" :selectable="selectable" ></el-table-column>
                    <el-table-column :label="'大门' + ('-' + checkRow.villageName)" >
                        <template slot-scope="scope">
                            <span class="deviceName_style">{{ scope.row.deviceName}}</span>
                            <span :class="['sync_status', 'sync_status_'+ scope.row['authStatus']]">
                                {{returnName(scope.row['authStatus'], selectStatus.options) || scope.row['authStatus'] || '-'}}
                            </span>
                            <!-- <span style="font-size: 14px;color: #EE7171;"  icon="el-icon-warning-outline" v-if="scope.row.authStatus==2"><i class="el-icon-warning-outline"></i>同步失败</span>
                            <span style="font-size: 14px;color: #EE7171;" icon="el-icon-warning-outline" v-else-if="scope.row.authStatus==0"><i class="el-icon-warning-outline"></i>待同步</span> -->
                        </template>
                    </el-table-column>
                    </el-table>
                </div>
                <div class="unitTable">
                    <el-table stripe :data="checkFloorDoorSelection" :header-cell-style="{background: '#F4F4F4'}" :header-cell-class-name="cellClass"
                    @selection-change="checkFloorDoorChange">
                        <el-table-column type="selection" width="20" align="center" :selectable="selectable"></el-table-column>
                        <el-table-column :label="'楼栋门' + ('-' + checkRow.address)">
                            <template slot-scope="scope">
                                <span class="deviceName_style">{{ scope.row.deviceName}}</span>
                                <span :class="['sync_status', 'sync_status_'+ scope.row['authStatus']]">
                                    {{returnName(scope.row['authStatus'], selectStatus.options) || scope.row['authStatus'] || '-'}}
                                </span>
                                <!-- <span style="font-size: 14px;color: #EE7171;"  v-if="scope.row.authStatus==2"><i class="el-icon-warning-outline"></i>同步失败</span>
                                <span style="font-size: 14px;color: #EE7171;" v-else-if="scope.row.authStatus==0"><i class="el-icon-warning-outline"></i>待同步</span> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- <span slot="footer" class="dialog-footer footerButton">
                <el-button class="ed-button ed_white_bottom " style="transform: translateY(-15px);" @click="cancelList">取消</el-button>
                <el-button class="ed-button ed_black-bottom" style="transform: translateY(-15px);" @click="addAuthList" :disabled="multipleDoorSelection.length ==0 && multipleFloorDoorSelection.length ==0">同步</el-button>
            </span> -->
            </el-dialog>
        </PageCard>
    </Page>
</template>

<script>
import { returnName } from "src/utils/common.js";
import EdExport from "src/components/EdExport.vue";
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import RoomInput from 'src/components/HousePicker/RoomInput.vue'
import { defineComponent } from 'vue'
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import {doorDeviceList ,singleSynchronizate,PersonAuthList,synchronizate,addAuthList,saveSynchronizate} from "./api.js";
import {getDictByCode} from "src/api/dictionaries";
export default defineComponent({
    name: 'access',
    components: { Page, PageCard, ApiTable, EdSelect,EdExport ,EdConfirmDelete ,RoomInput},
    data() {
        return {
            params: {
                identity: "",
                phone: "",
                rooms: undefined,
                status: '',
                orgId:this.$store.getters.vid
            },
            // 门禁查看请求参数
            gatewayPersonAuth:{
                personFileId: "",
            },
            // 批量同步请求参数
            addauthForm:[
                {channelId: 0,operateType: 1,personFileId:''}
            ],
            // 查看同步请求参数
            addAuthListform:[],
            identityParams:{
                options: [],
                placeholder:"请选择客户身份"
            },
            residentStatusParams:{
                options: [],
                placeholder:"请选择同步状态"
            },
            multipleSelection:[],
            isdisabled:false,
            synchronizateSuccessVisible:false,
            synchronizateFailVisible:false,
            checkDoorSelection: [],
            checkFloorDoorSelection: [],
            checkRow:{
                villageName:'',
                address:''
            },
            addAuthForm:{
                channelId: 0,
                deviceId: "",
                operateType: 0,
                personFileId: "",
                timePlanIndex: 0,
                userId: 0
            },
            multipleDoorSelection:[],
            multipleFloorDoorSelection:[],
            personFileId:'',
            selectIsdisabled:false,
            authStatus : 0,
            tabId:'',
            selectStatus:{  // 状态
                // placeholder:"请选择状态",
                options: [
                    { value: '0', label: '待同步' },
                    { value: '1', label: '同步成功' },
                    { value: '2', label: '同步失败' },
                ]
            },
        }
    },
    created() {
         getDictByCode("customer_identity").then(response => {
            if(response.success) {
                this.identityParams.options=response.data.items
            }
        })
        getDictByCode("synchronization_status").then(response => {
            if(response.success) {
                this.residentStatusParams.options=response.data.items
            }
        })
    },
    activated(){
        this.$nextTick(()=>{
            // this.orgId=this.$store.getters.vid
            this.$refs.table.load()
        })
    },
    methods: {
        cellClass(row){
            if(this.authStatus === 1 && row.columnIndex == 0) {
                return "disableSelection"
            }
        },
        // 同步状态成功，复选框禁用
        selectable(row,index){
            if(row.authStatus === 1){
                this.authStatus = 1
            return false;//禁用状态
            }else{
            return true;//非禁用状态
            }
       },
        tableApi:doorDeviceList,
        search(){
            this.$refs.table.load(1)
        },
        reset(){
            this.params = {};
            this.$nextTick(()=>{
                this.$refs.table.load(1,10)
                })
        },
        selectionData(value){
            this.multipleSelection = value
        },
        // 批量同步按钮
        synchronizate(){
            if(this.multipleSelection.length> 0) {
               this.addauthForm=this.multipleSelection.map(x=>{return {channelId: 0,operateType: 1,personFileId: x.personFileId,id:x.id,villageId:x.villageId} })
            //    this.addauthForm.personFileId= this.multipleSelection.map(x=>{return x.personFileId})
                 synchronizate(this.addauthForm).then(response => {
                    if(response.success) {
                        this.$message.success({
                            message: '同步状态已更新',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                    }
                    this.$message.error('批量同步失败')
                })
            }
        },
        clickSynchronizate(){
            let total =this.$refs.table.page.total
            // console.log('this.$refs.table.page.total',this.$refs.table.page.total)
            this.$refs.confirmDeleteRef.open("操作确认","<span>即将同步"+ total+"条数据</span><p style='font-size:12px'>符合查询条件数据都将同步！</p>","warning")
        },
        confirmDeleteTrue(){
                saveSynchronizate(this.params).then(response => {
                    if(response.success) {
                        this.$message.success({
                            message: '同步状态已更新',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                    }
                    this.$message.error('一键同步失败')
                })
        },
        // 查看接口
        check(row){
            this.tabId = row.id
            this.gatewayPersonAuth.personFileId = row.personFileId
            this.checkRow.villageName = row.villageName
            this.checkRow.address = row.address

            if(row.authStatus==2 && row.synchronizationErrMsgType==0){
                this.$message.warning({
                    message:'人员同步失败，请先进行人员同步',
                    duration: 2000,
                    center:true
                })
            } else {
                PersonAuthList({id:row.id}).then(response => {
                    if(response.success) {
                        this.checkDoorSelection = response.data.configVillageGatewayList
                        this.checkDoorSelection.data = response.data.configVillageGatewayList.name
                        this.checkFloorDoorSelection = response.data.configUnitGatewayList
                        // this.reset()
                        this.synchronizateFailVisible = true
                    }
                })
            }
        },
        // 列表里面的同步按钮
        addAuth(row){
            // 掉同步的时候先查询改项目下有没有设备，没有设备就掉同步的接口
            // PersonAuthList({id:row.id}).then(response => {
                // if(response.data.configVillageGatewayList.length>0 || response.data.configVillageGatewayList.length>0) {
                    singleSynchronizate({id:row.id,villageId:row.villageId,identity:row.identity,userId:row.userId}).then(response=>{
                        if(response.success){
                            this.$message.success({
                                    message: '单个同步成功！',
                                    duration: 2000,
                                    center:true
                                });
                            this.synchronizateFailVisible = false
                            this.$refs.table.load()
                        }
                        this.$message.error('单个同步失败')
                    })
                // } else {
                //     this.$message.warning('该项目下没有设备，请先绑定设备')
                // }
            // })
        },
        checkDoorChange(value){
            console.log('value',value);
            this.multipleDoorSelection = value
            console.log('multipleDoorSelection',this.multipleDoorSelection);
        },
        checkFloorDoorChange(value){
            this.multipleFloorDoorSelection = value
        },
        setDicTypeStatus(row ,cloumn) {
            let options = this.residentStatusParams.options.find(x => x.value == row.status)
            return options ? options.label : ''
        },
        // 查看里面的同步按钮
        addAuthList(row){
            this.addAuthListform = []
            if(this.multipleDoorSelection.length>0){
                this.addAuthListform =this.addAuthListform.concat(this.multipleDoorSelection.map(x=>{return {id:this.tabId,deviceId:x.deviceId,operateType:1,personFileId:this.gatewayPersonAuth.personFileId}}))
            }
            if(this.multipleFloorDoorSelection.length>0){
                this.addAuthListform= this.addAuthListform.concat(this.multipleFloorDoorSelection.map(x=>{return {id:this.tabId,deviceId:x.deviceId,operateType:1,personFileId:this.gatewayPersonAuth.personFileId}}))
            }
            addAuthList(this.addAuthListform).then(response => {
                    if(response.success) {
                        this.$message.success({
                            message: '同步成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                        this.synchronizateFailVisible = false
                        this.multipleDoorSelection=[]
                        this.multipleFloorDoorSelection=[]
                    }
                    this.$message.error('同步失败')
                })
        },
        cancelList(){
            this.synchronizateFailVisible = false
            this.multipleDoorSelection=[]
            this.multipleFloorDoorSelection=[]
        },
        returnName(val, options){
            return returnName(val, options)
        },
    }
})
</script>

<style lang="scss" scoped>
:deep .showTable{
    .el-table__header-wrapper{
        background: #F4F4F4;
    }
    .el-table__row .table_2_column_11 .cell {
        // width: 165px;
        margin-left: -20px;
    }
    .el-result__icon{
        transform: translateY(-40px);
    }
    .ed-button {
    transform: translateY(-37px);
    }
    .synchronizate {
        display: flex;
        flex-direction: row;
        align-items: center;
        .doorTable{
            box-sizing: border-box;
            // width: 222px;
            margin-right: 10px;
            height: 307px;
            background: #FFFFFF;
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
            align-items: flex-start;
            font-feature-settings: 'tnum' on, 'lnum' on;
            color: #414448;
            flex: 1;
        }
        .unitTable{
            box-sizing: border-box;
            // width: 222px;
            flex: 1;
            height: 307px;
            background: #FFFFFF;
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            // flex: none;
            order: 1;
            // flex-grow: 0;
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
            align-items: flex-start;
            font-feature-settings: 'tnum' on, 'lnum' on;
            color: #414448;
        }
        .dialog-footer.footerButton{
            display: flex;
            flex-direction: end;
            align-items: center;
        }
    }
    .wisdomDialog{
        background: #FFFFFF;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        .el-dialog__header{
            padding: 15px 24px 10px 24px !important;
            .title{
                font-size: 18px;
                line-height: 26px;
                color: #303133;
            }
        }
        .el-dialog__footer{
            padding: 8px 16px 16px 16px !important;
        }
        .el-table__empty-block{
            min-height: 48px !important;
            .el-table__empty-text{
                line-height: 48px !important;
            }
        }
        .el-table__header-wrapper .el-table-column--selection .cell .el-checkbox{
            display: none !important;

        }
        .el-table__body-wrapper .el-table-column--selection .el-checkbox{
            display: none;
        }
  
        .el-table .el-table__header .el-table__cell{
            font-size: 16px;
            line-height: 23px;
            color: #414448;
            font-weight: 500;
        } 
    }
}
:deep .el-table__header .disableSelection > .cell{
    display: none !important;
}
.spanLabel{
    width: 8px;height: 8px;border-radius: 50%;display: inline-block;vertical-align: 1px
}
.spanLabelWidth{
    width: 6px;height: 6px;
}
.spanLabelColor0{
    background-color: #EED096 !important;
}
.spanLabelColor1{
    background-color: #65A9A5 !important;
}
.spanLabelColor2{
    background-color: #EE7171 !important;
}
.sync_status{
    display: inline-block;
    width: 64px;
    height: 18px;
    padding: 0px 8px;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    border-radius: 19px;
    margin-left: 8px;
}
.sync_status_0{
    background: #FFF9ED;
    color: #ECB959;
}
.sync_status_1{
    background: #EDF6F6;
    color: #65A9A5;
}
.sync_status_2{
    background: #FFF9F9;
    color: #EE7171;
}
.deviceName_style{
    display: inline-block;
    font-size: 16px;
    line-height: 23px;
    color: #414448;
}
</style>